<template>
  <div class="enrollmentmanagement">
    <div class="tableContent">
      <div class="buttonBox">
        <div class="insert">
          <el-upload 
            class="upload-demo"
           name="file" action="action" 
           :show-file-list="false" 
           :http-request="fileChange"
           >
              <el-button type="primary" class="importBtn">
                  <span class="icon iconfont icon-daoru"></span>
                  导入
              </el-button>
          </el-upload>
            <!-- <el-button
              type="primary"
              class="importBtn"
              @click="importBtn"
            >
              <span class="icon iconfont icon-daoru"></span>
              导入
            </el-button> -->
            
            <el-button
              type="primary"
              class="exportBtn"
              @click="exportBtn"
            >
              <!-- <i class="el-icon-s-promotion"></i> -->
              <span class="icon iconfont icon-daochu"></span>
              导出
            </el-button>
        </div>
        <el-button type="primary" size="small" @click="admission">一键录取</el-button>
      </div>
      <div class="tableDataList">
          <el-table 
            :data="tableData" 
            style="width: 100%"
            tooltip-effect="dark"
            :header-cell-style="{ textAlign: 'center', background: '#f3f8fc' }"
            :cell-style="{textAlign:'center'}"
            >
            <el-table-column type="index" label="序号" width="60px">
            </el-table-column>
            <el-table-column prop="studentName" label="姓名" width="80px">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="60px">
              <template slot-scope="scope">
                <div>
                  <p>{{scope.row.gender === '40' ? '男' : '女'}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="60px">
            </el-table-column>
            <el-table-column prop="contactInformation" label="联系方式">
            </el-table-column>
            <el-table-column prop="parentsContactInformation" label="家长联系方式">
            </el-table-column>
            <el-table-column prop="intentionCollege" label="意向学院">
            </el-table-column>
            <el-table-column prop="intendedMajor" label="意向专业"></el-table-column>
            <el-table-column prop="" label="操作" width="200px">
              <template slot-scope="scope">
                <div class="handler">
                  <el-button 
                      type="primary" 
                      size="default" 
                      v-permission="['admin', 'editor']"
                      @click="receiveStudent(scope.row)"
                  >领取</el-button> 
                  <el-button
                      type="primary" 
                      size="default" 
                      @click="distribution(scope.row)" 
                      v-permission="['admin', 'editor']"
                  >分配</el-button> 
                </div>
              </template>
            </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="dialog">
        <el-dialog
        title="分配"
        :visible.sync="selectClassFlag"
        width="600px"
        height="800px"
        >
            <!-- <div class="selectClass">
                
            </div>
            <div class="searchClassData">
                
            </div> -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="所属院校：" prop="upResId">
                    <el-select
                        v-model="ruleForm.upResId"
                        clearable
                        placeholder="请选择"
                        @clear="handleClear"
                        @change="changeCollege"
                        ref="selectUpResId"
                    >
                    <el-option 
                      hidden 
                      :value="{value:ruleForm.upResId,label:upResName}" 
                      :label="upResName"
                    >
                    </el-option>
                        <el-tree
                            :data="treeData"
                            :props="defaultProps"
                            :expand-on-click-node="false"
                            :check-on-click-node="true"
                            @node-click="handleNodeClick"
                        >
                        </el-tree>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属院校：" prop="majorValue">
                    <el-select v-model="ruleForm.majorValue" @change="changeMajor" placeholder="请选择所属专业">
                        <el-option
                            v-for="item in majorOptions"
                            :key="item.majorId"
                            :label="item.majorName"
                            :value="{value:item.majorId,label:item.majorName}"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <div class="school">
                    <p>所属院校：</p>
                    
                </div> -->
                <!-- <div class="major">
                    <p>所属专业：</p>
                    <el-select v-model="majorValue" placeholder="请选择所属专业">
                    <el-option
                        v-for="item in majorOptions"
                        :key="item.majorId"
                        :label="item.majorName"
                        :value="item.majorId"
                    >
                    </el-option>
                    </el-select>
                </div> -->
              <el-form-item>
                <el-button class="establish" type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
              <el-button class="cancel" @click="selectClassCancel"
                  >取 消</el-button
              >
              <el-button
                  class="determine"
                  type="primary"
                  @click="selectClassBtn"
                  >确 定</el-button
              >
            </div> -->
        </el-dialog>
    </div>
    <div class="block" v-show="tableData.length">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="10"
              prev-text="上一页"
              next-text="下一页"
              layout="prev, pager, next, jumper"
              ref="pagination"
              :total="total"
            >
            </el-pagination>
            <el-button class="sure" type="primary">确定</el-button>
          </div>
  </div>
</template>
<script>
import {
    ExportEnrollmentApi,
    ImportenrollmentApi,
    EnrollmentListApi,
    AddenrollmentApi,
    EditenrollmentApi,
    AdmissionenrollmentApi
} from "@/api/enrollmentmanagement/enrollmentmanagement.js"
import {
  colleageTreeDataApi
} from "@/api/basics/college.js"
import {
  majorListApi
} from "@/api/basics/teachingPlan.js"
export default {
  data() {
    return {
      currentPage:0,
      tableData: [],
      selectClassFlag:false, // 分配弹框开关
      // 树组件
      defaultProps: {
        children: "children",
        label: "label",
      },
      ruleForm: {
           upResId:'',
           majorValue:'',
      },
      upResName:'',
      treeData:[],  // 学院树组件数据
      majorOptions:[],  // 专业数据
      rules:{
        upResId:[{ required: true, message: '请输入学院名称', trigger: 'blur' }],
        majorValue:[{ required: true, message: '请输入专业名称', trigger: 'blur' }]
      },
      enrollmentId:'',  // 分配id
      filename:'报名管理表',
      total:0
    }
  },
  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳到第";
    this.colleageTreeData()
    this.getEnrollmentList()

  },
  methods:{
    // 导入
    fileChange(files){
      let formData = new FormData(); 
        console.log(formData);
        console.log(123123123);
        formData.append('file', files.file);
        ImportenrollmentApi(formData).then((res) => {
            console.log(res);
            if(res.code === 200) {
              this.$message({
                type: 'success',
                message: '导入成功',
              });
              this.getEnrollmentList()
            }
        });
    },
    // 获取列表
    getEnrollmentList() {
      EnrollmentListApi({pageSize:'10',pageNum:this.currentPage}).then(res=>{
        if(res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
       
    },
    // 领取
    receiveStudent(row) {
      console.log(row);
      AddenrollmentApi({id:row.id}).then(res=>{
        console.log(res);
        if(res.code === 200) {
          this.$message({
            type: 'success',
            message: '领取成功',
          });
          this.getEnrollmentList()
        }else {
          this.$message({
            type: 'error',
            message: '领取失败',
          });
        }
      })
    },
    changeMajor(obj) {
      console.log(123);
      this.ruleForm.majorValue = obj.label
      console.log(obj);
    },

    changeCollege(obj) {
      console.log(obj);
      this.upResName = obj.label
    },

    handleSizeChange() {},
    handleCurrentChange() {
      this.getEnrollmentList()
    },
    // 所属院校下拉框
    async colleageTreeData() {
      const data = await colleageTreeDataApi();
      console.log(data, "学院管理左侧导航树");
      if(data.code === 200) {
        this.treeData = data.data;
      }
    },

    // 所属专业下拉框
    async collegesValueHandler(id) {
      const data = await majorListApi({ colleageId: id});
      console.log(data);
      this.majorOptions = data.rows;

    },

      // select下拉树
    handleNodeClick(data) {
        console.log(data);
        // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
        this.upResName = data.label;
        this.ruleForm.upResId = data.label;
        this.collegesValueHandler(data.id)
        // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
        this.$refs.selectUpResId.blur();
    },

    handleClear() {},
    

    // 导出
    exportBtn() {
        this.$confirm("是否导出全部数据？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
              ExportEnrollmentApi().then((res)=>{
                console.log(res)
                if (!res) return;
                const blob = new Blob([res], {
                  type: "application/vnd.ms-excel",
                }); // 构造一个blob对象来处理数据，并设置文件类型
                if (window.navigator.msSaveOrOpenBlob) {
                  //兼容IE10
                  navigator.msSaveBlob(blob, this.filename);
                } else {
                  const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
                  const a = document.createElement("a"); //创建a标签
                  a.style.display = "none";
                  a.href = href; // 指定下载链接
                  a.download = this.filename; //指定下载文件名
                  console.log(this.filename);
                  a.click(); //触发下载
                  URL.revokeObjectURL(a.href); //释放URL对象
                }
              })
          })
          .catch(() => {});
    },

    // 弹框确定 / 取消事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          let obj = {
            id:this.enrollmentId,
            intentionCollege:this.ruleForm.upResId,
            intendedMajor:this.ruleForm.majorValue,
          }
          console.log(obj);
          EditenrollmentApi(obj).then(res=>{
            console.log(res);
            if(res.code === 200) {
              this.$message({
                type: 'success',
                message: '分配成功',
              });
              this.selectClassFlag = false
              this.getEnrollmentList()
            }else {
              this.$message({
                type: 'error',
                message: '分配失败',
              });
            }
          })
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.selectClassFlag = false
      this.$refs[formName].resetFields();
    },

    // 分配
    distribution(row) {
      console.log(row);
      this.selectClassFlag = true
      this.enrollmentId = row.id
      this.ruleForm.upResId = row.intentionCollege
      this.ruleForm.majorValue = row.intendedMajor
    },

    // 一键录取
    admission() {
      if(this.total > 0) {
        AdmissionenrollmentApi().then(res=>{
          if(res.code === 200) {
            this.$message({
              type: 'success',
              message: '一键录取成功',
            });
            this.getEnrollmentList()
          }else {
            this.$message({
              type: 'error',
              message: '一键录取失败',
            });
          }
        })
      }else {
        this.$message({
          type: 'error',
          message: '暂无学生可以录取',
        });
      }
      
    }
  }
}
</script>

<style lang="scss" scoped>
.enrollmentmanagement {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;

//   .el-button {
//     // width: 68px;
//     height: 32px;
//     // line-height: 32px;
//     margin-left: 10px;
//     vertical-align: middle;
//   }

  .tableContent {

    width: 100%;
    flex: 1;
    background-color: white;
    padding: 0 20px;
    // margin-top: 10px;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
    min-width: 100vh;
    height: 100%;

    .insert {
    //   .el-button {
    //     margin: 35px 0 15px 15px;
    //     width: 68px;
    //   }
    .icon{
      font-size: 15px;
    }
    display: flex;
        button {
            border: none;
        }
        .importBtn{
            background-color: #66c8e3;
        }
          .exportBtn {
            background-color: #fabd90;
            margin-left: 10px;
        }
    }

    // .el-button {
    //   margin: 35px 0 15px 15px;
    //   width: 95px;
    // }

    .buttonBox {
      display: flex;
      justify-content: space-between;
      height: 60px;
      padding: 10px;
    }

    // .handler {
    //   .el-button {
    //     margin: 0 10px;
    //     width: 68px;
    //   }
    // }
  }
    .dialog {
        ::v-deep .el-dialog{
            border-radius: 10px;
            .el-dialog__header {
                border-radius: 10px 10px 0 0;
                text-align: center;
                background-color: rgb(72, 149, 219);
                .el-dialog__title {
                    color: #fff;
                }
                .el-dialog__headerbtn .el-dialog__close {
                    color: #fff;
                }
            }
            .el-dialog__body{
              height: 400px;
              .el-form-item:last-child{
                margin-top: 100px;
              }
            }
            
            .el-form-item{
              display: flex;
              justify-content: center;
              .el-form-item__content{
                margin-left: 0 !important;
              }
            }
            .dialog-footer {
                // height: 100%;
                text-align: center;
                button {
                    width: 100px;
                    height: 35px;
                    border-radius: 16px;
                    line-height: 0;
                }
                .cancel {
                    border: none;
                    color: #848383;
                    background-color: #f0f0f0;
                }
                .determine {
                    border: none;
                    background-color: #4995dc;
                }
            }
        }
        
    }
    .block {
    padding: 0 20px 0 0;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: right;
    background-color: #fff;

    ::v-deep .btn-prev {
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #6f6f6f;
    }

    ::v-deep .btn-next {
      border: solid 1px #e6e6e6;
      border-radius: 5px;
      color: #6f6f6f;
    }
    ::v-deep .el-pager li {
      background: #fff;
      font-size: 13px;
      min-width: 30.5px;
      height: 28px;
      line-height: 28px;
      box-sizing: border-box;
    }

    ::v-deep .el-pager li.active {
      background-color: #4895db;
      color: #fff;
      cursor: default;
    }
    ::v-deep .number {
      border: solid 1px #e6e6e6;
      margin: 0 5px;
      border-radius: 5px;
      color: #6f6f6f;
    }
    ::v-deep .el-button {
      // width: 50px;
      height: 28px;
      line-height: 0;
    }
    .sure {
      width: 50px;
      height: 30px;
      line-height: 0;
      text-align: center;
      padding: 0;
    }
  }
    
    

}
</style>
